<script setup lang='ts'>
import { useRouter,RouterView } from "vue-router";
import mitter from "@/utils/mitt"
import { ref } from 'vue'
const active = ref(0)
const router = useRouter()
const goBack = () => {
    router.push({ name: 'Task', query: { id: '2' } })
}
mitter.on('steps',(value)=>{
    active.value = value as number
})
</script>

<template>
    <div class="content">
        <div class="back">
            <el-page-header title="返回" @back="goBack">
                <template #content>
                    <span class="text-large font-600 mr-3">注册账号</span>
                </template>
            </el-page-header>
        </div>
        <div class="steps">
            <el-steps style="max-width: 1300px" :active="active" finish-status="success" align-center>
                <el-step title="注册" description="请输入账号信息"/>
                <el-step title="验证码"  description="请输入验证码"/>
                <el-step title="完成验证"  description="等待回到页面"/>
            </el-steps>
        </div>
        <RouterView></RouterView>
    </div>
</template>

<style scoped>
.content {
    width: 1300px;
    margin: auto;
}

.back {
    margin-top: 20px;
    margin-bottom: 20px;
}
.steps{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
</style>